<template>
    <div class="main">
        <section>
            <div v-if="rightsButtons['add']" class="btn-block">
                <el-button type="success" size="small" icon="el-icon-circle-plus" plain @click="showAdd">新建福利档期</el-button>
            </div>
            <search-form :listQuery="listQuery" :queryConfig="queryConfig" :labelWidth="100" :search="search"/>
            <el-table v-loading="listLoading" :data="list" element-loading-text="给我一点时间" border fit highlight-current-row>
                <el-table-column align="center" label="序号" type="index" fixed :index="(index)=>{return indexMethod(index, listQuery)}" width="80">
                </el-table-column>
                <el-table-column align="center" label="档期标题" prop="title" min-width="120"></el-table-column>
                <el-table-column align="center" label="抢购时间" min-width="310">
                    <template slot-scope="scope">
                        <span v-if="scope.row.startTime">{{scope.row.startTime}} 至 {{scope.row.endTime}}</span>
                        <span v-else> - </span>
                    </template>
                </el-table-column>
                <el-table-column align="center" label="商品数量" width="120" prop="goodsCount"></el-table-column>
                <el-table-column align="center" label="状态" width="120">
                    <template slot-scope="scope">
                        <span v-if="scope.row.gearStatus">{{statusData.find(item => item.value === scope.row.gearStatus).label}}</span>
                        <span v-else> - </span>
                    </template>
                </el-table-column>
                <el-table-column align="center" label="是否启用" width="100">
                    <template slot-scope="scope">
                        <el-switch
                                v-model="scope.row.isEnabled"
                                @change="updateStatus(scope.row)"
                                active-color="#13ce66"
                                inactive-color="#ff4949"
                                :active-value="1"
                                :inactive-value="0"
                                :disabled="!rightsButtons['operate']">
                        </el-switch>
                    </template>
                </el-table-column>
                <el-table-column align="center" label="操作" min-width="200" fixed="right"  v-if="rightsButtons['edit'] || rightsButtons['goodsList']">
                    <template slot-scope="scope">
                        <el-button v-if="rightsButtons['edit']" type="text" size="mini" @click="showEdit(scope.row)">管理档期时间</el-button>
                        <el-button v-if="rightsButtons['goodsList']" type="text" size="mini" @click="$router.push({ name: 'welfareScheduleGoodsList', params: { id: scope.row.id }})">管理档期商品</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <el-pagination
                    v-if="paginationShow"
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    :current-page.sync="listQuery.pageIndex"
                    :page-sizes="[10, 20, 50, 100, 200]"
                    :page-size="listQuery.pageSize"
                    background
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="listTotal">
            </el-pagination>
            <el-dialog :title="formData.id ? '管理档期时间' : '新建福利档期'" :visible.sync="dialogVisible">
                <el-form :model="formData" size="medium" ref="form" label-width="120px">
                    <el-form-item label="标题:" prop="title" :rules="commonRules.notNullRule">
                        <el-input v-model="formData.title" placeholder="标题：显示在Tab标签" maxlength="6"></el-input>
                    </el-form-item>
                    <el-form-item label="抢购时间:" prop="timeRange" :rules="commonRules.notNullSelectRule">
                        <el-date-picker
                                v-model="formData.timeRange"
                                type="datetimerange"
                                range-separator="~"
                                start-placeholder="开始时间"
                                end-placeholder="结束时间"
                                format="yyyy-MM-dd HH:00:00"
                                value-format="yyyy-MM-dd HH:00:00">
                        </el-date-picker>
                    </el-form-item>
                    <el-form-item label="是否启用:">
                        <el-switch
                                v-model="formData.isEnabled"
                                active-color="#13ce66"
                                inactive-color="#ff4949"
                                :active-value="1"
                                :inactive-value="0">
                        </el-switch>
                    </el-form-item>
                </el-form>
                <div slot="footer" class="dialog-footer">
                    <el-button type="primary" @click="save" :loading="btnLoading">保存</el-button>
                    <el-button @click="dialogVisible = false">取消</el-button>
                </div>
            </el-dialog>
        </section>
    </div>
</template>
<script>
    import SearchForm from '@/components/searchForm'
    export default {
      name: 'welfareSchedule',
      components: {
        SearchForm
      },
      data(){
        let statusData = [
          {
            label: '全部',
            value: 0
          },
          {
            label: '未开始',
            value: 1
          },
          {
            label: '抢购中',
            value: 2
          },
          {
            label: '已结束',
            value: 3
          }
        ];
        return {
          statusData,

          listQuery: {
            rushDate: [],

            startTime: "",
            endTime: "",
            gearStatus: 0,
            pageIndex: 1,
            pageSize: 10
          },
          queryConfig: [
            {
              prop: 'rushDate',
              type: 'daterange',
              label: '抢购时间'
            },
            {
              prop: 'gearStatus',
              type: 'select',
              label: '栏目状态',
              data: statusData
            }
          ],
          listLoading: true,
          list: [],
          listTotal: 0,
          paginationShow: false,

          dialogVisible: false,
          btnLoading: false,
          formData: {
            timeRange: [],

            id: '',
            title: '',
            startTime: '',
            endTime: '',
            isEnabled: 1
          }
        }
      },
      mounted(){
        // this.listQuery = this.getLocalQuery(this.listQuery, 'welfareIndex');
        this.getList();
      },
      methods: {
        getList(){
          this.listLoading = true;
          let rFlag = this.listQuery.rushDate && this.listQuery.rushDate.length
          this.listQuery.startTime = rFlag ? this.listQuery.rushDate[0]+' 00:00:00' : ''
          this.listQuery.endTime = rFlag ? this.listQuery.rushDate[1]+' 23:59:59' : ''
          this.setLocalQuery(this.listQuery, 'welfareIndex');
          this.request({
            url: '/server-upgrade-web-manage/welfare/list',
            method: 'post',
            data: this.listQuery
          }).then(({data}) => {
            this.list = data.viewList;
            this.listTotal = data.totalCount;
            this.listLoading = false;
            this.paginationShow = true
          }).catch(err => {
            console.log(err);
            this.list = [];
            this.listTotal = 0;
            this.listLoading = false;
            this.paginationShow = true
          });
        },
        search () {
          this.listQuery.pageIndex = 1;
          this.getList();
        },
        handleSizeChange (value) {
          this.listQuery.pageSize = value;
          this.getList();
        },
        handleCurrentChange (value) {
          this.listQuery.pageIndex = value;
          this.getList();
        },
        showAdd(){
          this.formData = {
            timeRange: [],

            id: '',
            title: '',
            startTime: '',
            endTime: '',
            isEnabled: 1
          };
          this.$nextTick(()=>{
            this.$refs.form.clearValidate()
          });
          this.dialogVisible = true;
          this.btnLoading = false;
        },
        showEdit(row){
          this.formData = {
            timeRange: row.startTime ? [row.startTime, row.endTime] : [],
            id: row.id,
            title: row.title,
            startTime: row.startTime,
            endTime: row.endTime,
            isEnabled: row.isEnabled
          };
          this.dialogVisible = true;
          this.btnLoading = false;
        },
        updateStatus(item){
          this.request({
            url: '/server-upgrade-web-manage/welfare/updateWelfareManageStatus',
            method: 'post',
            params: {
              id:item.id,
              isEnabled:item.isEnabled
            }
          }).then(() => {
            this.$message.success(item.isEnabled === 1 ? '启用成功' : '禁用成功');
          }).catch(err => {
            this.$message.error(err);
          });
        },
        save(){
          this.$refs.form.validate(valid => {
            if (!valid) {
              return false;
            }

            let timeRange = this.formData.timeRange;
            if (timeRange && timeRange.length > 0) {
              this.formData.startTime = timeRange[0];
              this.formData.endTime = timeRange[1];
            }
            this.btnLoading = true;
            this.request({
              url: '/server-upgrade-web-manage/welfare/addWelfareManage',
              method: 'post',
              data: this.formData
            }).then(() => {
              this.btnLoading = false;
              this.dialogVisible = false;
              this.$message.success('保存成功');
              this.getList();
            }).catch(err => {
              this.btnLoading = false;
            });
          });
        }
      }
    }
</script>
